<script setup lang="ts">
import { useRouter } from "vue-router";
let router = useRouter()
let toinfo = () =>{
    router.push('/info')
}
let home = () =>{
    router.push('/home')
}
</script>

<template>
    <div class="section">
        <div class="section1">OMINI.cn</div>
        <div class="section2">
            <div class="sc1">完善基本信息</div>
            <div class="sc2">检测到您尚未填写基本信息，可能会影响您的购物体验，是否现在立即添加？</div>
            <div class="sc3">
                <div @click="home">先不了</div>
                <div @click="toinfo">立即添加</div>
            </div>
        </div>
        <div class="section3">BY OMINI.BASS</div>
    </div>
</template>

<style scoped>
.section {
    background: url(https://www.pmdaniu.com/storages/124210/868aee87bcfe25b7b4bd93393e7a65a6-114945/images/%E5%90%AF%E5%8A%A8%E9%A1%B5/u519.png) no-repeat;
    height: 600px;
}
.section1{
    font-size: 28px;
    color: white;
}
.section2{
    width: 60%;
    height: 180px;
    margin-top: 40%;
    margin-left: 15%;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
}
.sc1{
    font-size: 20px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}
.sc2{
    font-size: 14px;
    font-weight: bold;
}
.sc3{
    display: flex;
    margin-top: 10%;
}
.sc3 div{
    width: 50%;
    text-align: center;
    font-size: 12px;
}
.sc3 div:nth-child(2){
    color: #C1AB96;
}
.section3{
    margin-top: 45%;
    margin-left: 35%;
    color: white;
    font-size: 12px;
}
</style>